<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>条件渲染</title>
    <script src="./js/babel.min.js"></script>
    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>
    <style>
      #ad {
        width: 200px;
        height: 200px;
        position: absolute;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        padding: 20px;
        color: white;
      }
    </style>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      //数据  是否为 vip
      let isVip = false;

      // 渲染: 将虚拟 DOM 对象转为真实 DOM, 插入到文档的过程, 称之为『渲染』
      //方法一: 逻辑运算符
      // let vdom = <div>
      //     {!isVip && <div id="ad">不要 998, 不要 888, 点击来就让把电脑抱回家</div> }
      //   </div>;

      // let vdom = <div>
      //   {isVip || <div id="ad">不要 998, 不要 888, 点击来就让把电脑抱回家</div> }
      // </div>;

      //方法二: 三元运算符
      // let vdom = <div>
      //   {isVip ? null :  <div id="ad">不要 998, 不要 888, 点击来就让把电脑抱回家</div>}
      // </div>;

      //方法三: 函数调用
      function getAd(){
        if(isVip){
          return null;
        }
        return <div id="ad">不要 998, 不要 888, 点击来就让把电脑抱回家</div>;
      }

      let vdom = <div>{getAd()}</div>
      

      ReactDOM.render(vdom, document.querySelector("#root"));
    </script>
  </body>
</html>
